<template>
	<view class="price-difference" :style="[{paddingTop:statusBar+ 'px'}]" >
		<view class="status" :style="[{height:statusBar+ 'px'}]" ></view>
		<view class="navigation" :style="[{top:(statusBar-2)+ 'px'}]">
			<image src="/static/images/back.png" class="back" @click="back()" mode=""></image>
			<view class="navigation-title">补差价</view>
		</view>
		<view class="navigation-position"></view>
		<view class="price-difference-tips">您需要补差价才可拿到商品</view>
		<view class="waiting-price-difference">
			<view>待补差价(元)</view>
			<view>{{ pay_cash_price }}</view>
		</view>
		<view class="price-difference-pay-methods">
			<view>请选择支付方式</view>
			<view>
				<view>
					<image src="/static/images/balance.png" mode=""></image>
					<view>余额支付</view>
				</view>
				<image src="/static/images/choicedicon.png"  mode=""></image>
			</view>
		</view>
		<view class="confirm" @click="goldProductTaking()">确认支付</view>
	</view>
</template>

<script>
	/* function getRequestParams() {
			let url = location.href;
			let requestParams = {};
			if (url.indexOf('?') !== -1) {
				let str = url.substr(url.indexOf('?') + 1);
				let strs = str.split('&');
				for (let i = 0; i < strs.length; i++) {
					requestParams[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
				}
			}
			return requestParams;
	}
	
	let params = getRequestParams();
	
	let token = params['token'];
	
	let status_bar =  params['status_bar'];
	
	let source = 'wap';
	
	if(token!=undefined){
		
		uni.setStorage({key: 'token',data: token })
		
		source = 'app';
		
	}
	if(status_bar!=undefined){
		
		uni.setStorage({ key: 'status_bar', data: status_bar })
		
	} */
	
	import store from "store";
	
	import {mapGetters,mapMutations,mapActions} from 'vuex';
	
	import { goldProductTaking } from "api/goldstormApi.js"
	
	export default {
		store,
		computed:{
			...mapGetters([
				'user',
				'statusBar'
			])
		},
		data() {
			return {
				source:source,
				parms:null,
				pay_cash_price:null
			}
		},
		methods:{
			back(){
				if(this.source == 'wap'){
					uni.navigateBack()
				}else{
					backToApp.postMessage('back');
				}
			},
			async goldProductTaking(){
				let parms = this.parms;
				const response = await goldProductTaking(parms)
				if(response.errors){
					return 
				}else{
					if(!response.message){
						uni.showModal({
							title:'提示',
							content:'发货订单已提交，请耐心等待发货！',
							confirmText:'知道了',
							showCancel:false,
							success: function (res) {
								if (res.confirm) {
									var pages= getCurrentPages()
									var prevPage = pages[pages.length-3]
									prevPage.$vm.backEventSelling()
									uni.navigateBack({
										delta:2
									})
								}
							}
						})
					}else{
						uni.showModal({
							title:'提示',
							content:Object.values(response.errors)[0][0],
							confirmText:'知道了',
							confirmColor:'#FF6011',
							showCancel:false
						})
					}
				}
			}
		},
		onLoad(options) {
			this.parms = JSON.parse(decodeURIComponent(options.parms))
			this.pay_cash_price = options.price
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #F6F6F6;
	}
	.status {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 99;
		background: #F6F6F6;
	}
	.navigation{
		width: 100%;
		height: 100rpx;
		background: #F6F6F6;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left:0;
		top:0;
		z-index:99;
	}
	.navigation-position{
		width: 100%;
		height: 100rpx;
		background: rgba(0,0,0,0);
	}
	.back{
		display: block;
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top: 26rpx;
		left:32rpx;
	}
	.navigation-title{
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}
	.price-difference-tips{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 36rpx;
		margin: 20rpx 0 0 32rpx;
	}
	.waiting-price-difference{
		width: 686rpx;
		height: 264rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin:24rpx auto 16rpx;	
		>view:nth-child(1){
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 40rpx;
			text-align: center;
			padding-top: 48rpx;
		}
		>view:nth-child(2){
			font-size: 84rpx;
			font-family: DINAlternate-Bold, DINAlternate;
			font-weight: bold;
			color: #333333;
			line-height: 96rpx;
			text-align: center;
			margin-top: 16rpx;
		}
	}
	.price-difference-pay-methods{
		width: 686rpx;
		height: 210rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 0 auto;
		>view:nth-child(1){
			display: flex;
			align-items: center;
			height: 106rpx;
			border-bottom: 1rpx solid #F0F0F0;
			padding-left: 32rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
		}
		>view:nth-child(2){
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 102rpx;
			>view:nth-child(1){
				display: flex;
				align-items: center;
				padding-left: 32rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				>image{
					display: block;
					width: 40rpx;
					height: 40rpx;
					margin-right: 16rpx;
				}
			}
			>image{
				display: block;
				width: 36rpx;
				height: 36rpx;
				margin-right: 40rpx;
			}
		}
	}
	.confirm{
		width: 686rpx;
		height: 96rpx;
		background: #FF9500;
		border-radius: 48rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 150rpx;
		left:32rpx;
	}
</style>